<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script src="./node_modules/moment/moment.js"></script>

    <style>
    
        table,td,th{
            border: 1px solid #000;
        }
        
    </style>
</head>
<body>
    <div id="app">
            <label class="sr-only">请输入品牌名称</label>
            <input type="text" @keyup.enter="add" v-model="brandName" class="form-control"  placeholder="品牌名称">

            <button class="btn btn-default" @click.prevent="add">添加</button>
            <br>
            <br>
            <label class="sr-only">请输入搜索关键字</label>
            <input type="text" class="form-control" placeholder="搜索关键字" v-model="keyword">


        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Index</th>
                    <th>Brand Name</th>
                    <th>Create Time</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in search" :key="index">
                    <td>{{index + 1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime | dateformat("YYYY赵MM春DD明 HH:mm:ss")}}</td>
                    <td>
                        <button class="btn btn-danger" @click="del(item._id)">删除</button>
                    </td>
                </tr> 
                
            </tbody>
        </table>
    </div>

    <script>

        Vue.filter("dateformat", function(value, pattern){
            //将value字符串进行日期格式化之后返回结果
            return moment(value).format(pattern);
        })



        // 1. 页面刚加载的时候，页面中就需要显示列表数据
            // 我们需要在created中发送ajax请求获取接口数据
            // 将接口的返回的数据展示到页面中


        //1. 创建vue对象
        var vm = new Vue({
            el: "#app",
            data: {
                brandName: "",
                brandsList: [],
                keyword: ""
            },
            methods: {
                add: function () {
                    // 1. 获取用户输入的品牌名称
                    // 2. 发送ajax请求将数据添加到数据库中
                    if(this.brandName.trim() == ""){
                        alert("请输入品牌名称");
                        return;
                    }
                    axios({
                        url: "http://localhost:9999/api/addproduct",
                        method: "post",
                        data: {name: this.brandName}
                    }).then(res => {
                        //3. 添加数据成功之后
                        // 重新渲染一次列表
                        this.getData();

                        this.brandName = "";
                    })
                },
                del: function(id){
                    
                    //1. 发送ajax请求删除数据
                    axios({
                        url: "http://localhost:9999/api/delproduct/" + id
                    }).then(res => {
                        if(res.data.errCode == 200){
                            //2. 删除数据成功之后，重新渲染列表
                            this.getData();
                        }
                    })
                },
                //获取列表数据的功能封装
                getData(){
                    //1. 发送ajax请求，获取列表数据
                    axios({
                        url: "http://localhost:9999/api/getprodlist"
                    }).then(res => {
                        // console.log(res);
                        // 后台返回的数据展示到页面里面去
                        this.brandsList = res.data.data;
                    })
                }
            },
            computed: {
                search: function(){
                    // var that = this;
                    // var result = this.brandsList.filter(function(v, i){
                    //     return v.name.indexOf(that.keyword) != -1;
                    // })

                    var result = this.brandsList.filter((v, i) => 
                         v.name.indexOf(this.keyword) !== -1
                    );

                    return result;
                }
            },
            created(){
                this.getData();
            }
        })


        // 晚上练习：
        // 1. 启动mongodb   mongod --dbpath ./data
        // 2. 启动后台app.js  node app.js


    </script>
</body>

</html>